React Dashboard Application

A React Dashboard Application is a web interface that displays important information, statistics, reports, charts, and activity summaries in one place. It is commonly used in admin panels, sales management systems, e-commerce platforms, analytics applications, and business management software. This project helps developers understand React components, props, state management, data visualization, API integration, conditional rendering, and responsive UI design.

React JS Course: JustAcademy React JS Training Course

Course Demo: Register for React JS Course Demo

1. Learning Objectives

• Understand the structure of a React Dashboard.
• Create reusable dashboard components.
• Display statistics using summary cards.
• Render tables and lists using map().
• Manage interactive elements using useState.
• Display charts using a charting library.
• Implement search and filtering.
• Fetch dashboard data from an API.
• Handle loading, empty, and error states.
• Create a responsive layout using CSS Grid, Flexbox, and media queries.

2. What Is a Dashboard Application?

A dashboard application provides a centralized view of important information. It presents complex data in an organized format so users can monitor performance and make decisions quickly.

Common Dashboard Features

• Sidebar navigation.
• Top navigation bar and user profile.
• Summary cards for revenue, orders, customers, and pending tasks.
• Charts and graphs for trends and comparisons.
• Recent activity and transaction tables.
• Search, sorting, and date filters.
• Notifications and status indicators.
• Responsive layouts for desktop, tablet, and mobile devices.

3. Technologies Used

4. Create a React Dashboard Project

Install Node.js and npm, then execute the following commands in your terminal.

npm create vite@latest react-dashboard -- --template react
cd react-dashboard
npm install
npm install recharts
npm run dev

Open the local development URL displayed in your terminal.

Recommended Project Structure

react-dashboard/
├── src/
│   ├── components/
│   │   ├── Sidebar.jsx
│   │   ├── StatCard.jsx
│   │   ├── SalesChart.jsx
│   │   └── TransactionsTable.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.css
│   └── main.jsx
├── package.json
└── index.html

5. Create Sample Dashboard Data

A dashboard can use local sample data during development or retrieve data from a backend API. The following values are fictional and are provided for practice.

const stats = [
  { id: 1, title: "Total Revenue", value: "₹2,45,000", change: "+12.5%" },
  { id: 2, title: "Total Orders", value: "1,240", change: "+8.2%" },
  { id: 3, title: "Total Customers", value: "850", change: "+5.4%" },
  { id: 4, title: "Pending Orders", value: "36", change: "-2.1%" }
];

const salesData = [
  { month: "Jan", sales: 18000 },
  { month: "Feb", sales: 22000 },
  { month: "Mar", sales: 19500 },
  { month: "Apr", sales: 28000 },
  { month: "May", sales: 31000 },
  { month: "Jun", sales: 27000 }
];

const transactions = [
  { id: 101, customer: "Aarav Sharma", product: "Laptop", amount: 65000, status: "Completed" },
  { id: 102, customer: "Priya Patel", product: "Headphones", amount: 2500, status: "Pending" },
  { id: 103, customer: "Rahul Verma", product: "Smart Watch", amount: 4500, status: "Completed" },
  { id: 104, customer: "Neha Singh", product: "Keyboard", amount: 1800, status: "Cancelled" },
  { id: 105, customer: "Rohan Mehta", product: "Monitor", amount: 12000, status: "Pending" }
];

6. Create the StatCard Component

A StatCard displays one important metric. Reusing the same component makes the dashboard easier to maintain.

Create src/components/StatCard.jsx:

function StatCard({ title, value, change }) {
  return (
    <article className="stat-card">
      <p className="stat-title">{title}</p>
      <h2 className="stat-value">{value}</h2>
      <p className="stat-change">{change} from previous period</p>
    </article>
  );
}
export default StatCard;

Explanation

• title describes the metric.
• value displays the current value.
• change displays a comparison with a previous period.
• Props allow one component to display different statistics.

7. Create the Sidebar Component

The sidebar provides navigation links to dashboard sections.

Create src/components/Sidebar.jsx:

const menuItems = [
  "Overview",
  "Analytics",
  "Orders",
  "Customers",
  "Settings"
];

function Sidebar() {
  return (
    <aside className="sidebar">
      <h2 className="brand">AdminPanel</h2>
      <nav aria-label="Main navigation">
        <ul className="sidebar-menu">
          {menuItems.map((item, index) => (
            <li key={item}>
              <a
                href={index === 0 ? "#overview" : `#${item.toLowerCase()}`}
                className={index === 0 ? "active" : ""}
              >
                {item}
              </a>
            </li>
          ))}
        </ul>
      </nav>
    </aside>
  );
}
export default Sidebar;

Note: These are basic section links. Use React Router if you need separate pages with client-side routing.

8. Create the SalesChart Component

Charts make it easier to understand trends and compare values over time. This example uses Recharts.

Create src/components/SalesChart.jsx:

import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip
} from "recharts";

function SalesChart({ data }) {
  return (
    <section className="panel chart-panel">
      <h2>Sales Overview</h2>
      <div className="chart-container">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={data}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="month" />
            <YAxis />
            <Tooltip />
            <Line
              type="monotone"
              dataKey="sales"
              name="Sales"
              stroke="#2563eb"
              strokeWidth={3}
              activeDot={{ r: 6 }}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </section>
  );
}
export default SalesChart;

Chart Concepts

• LineChart displays trends over time.
• XAxis displays month labels.
• YAxis displays the numerical scale.
• Tooltip shows details when users interact with chart points.
• ResponsiveContainer adapts the chart to its parent container.

9. Create the TransactionsTable Component

This component displays recent transactions and supports searching by customer or product.

Create src/components/TransactionsTable.jsx:

import { useState } from "react";

function TransactionsTable({ transactions }) {
  const [search, setSearch] = useState("");

  const filteredTransactions = transactions.filter((transaction) =>
    `${transaction.customer} ${transaction.product}`
      .toLowerCase()
      .includes(search.trim().toLowerCase())
  );

  return (
    <section className="panel transactions-panel">
      <div className="table-heading">
        <h2>Recent Transactions</h2>
        <input
          type="search"
          value={search}
          onChange={(event) => setSearch(event.target.value)}
          placeholder="Search transactions..."
          aria-label="Search transactions"
        />
      </div>
      <div className="table-wrapper">
        <table>
          <thead>
            <tr>
              <th>Customer</th>
              <th>Product</th>
              <th>Amount</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {filteredTransactions.map((transaction) => (
              <tr key={transaction.id}>
                <td>{transaction.customer}</td>
                <td>{transaction.product}</td>
                <td>₹{transaction.amount.toLocaleString("en-IN")}</td>
                <td>
                  <span className={`status status-${transaction.status.toLowerCase()}`}>
                    {transaction.status}
                  </span>
                </td>
              </tr>
            ))}
            {filteredTransactions.length === 0 && (
              <tr>
                <td colSpan="4">No transactions found.</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </section>
  );
}
export default TransactionsTable;

10. Build the Main Dashboard in App.jsx

The main component combines the sidebar, summary cards, sales chart, and transaction table.

Create src/App.jsx:

import Sidebar from "./components/Sidebar";
import StatCard from "./components/StatCard";
import SalesChart from "./components/SalesChart";
import TransactionsTable from "./components/TransactionsTable";
import "./App.css";

const stats = [
  { id: 1, title: "Total Revenue", value: "₹2,45,000", change: "+12.5%" },
  { id: 2, title: "Total Orders", value: "1,240", change: "+8.2%" },
  { id: 3, title: "Total Customers", value: "850", change: "+5.4%" },
  { id: 4, title: "Pending Orders", value: "36", change: "-2.1%" }
];

const salesData = [
  { month: "Jan", sales: 18000 },
  { month: "Feb", sales: 22000 },
  { month: "Mar", sales: 19500 },
  { month: "Apr", sales: 28000 },
  { month: "May", sales: 31000 },
  { month: "Jun", sales: 27000 }
];

const transactions = [
  { id: 101, customer: "Aarav Sharma", product: "Laptop", amount: 65000, status: "Completed" },
  { id: 102, customer: "Priya Patel", product: "Headphones", amount: 2500, status: "Pending" },
  { id: 103, customer: "Rahul Verma", product: "Smart Watch", amount: 4500, status: "Completed" },
  { id: 104, customer: "Neha Singh", product: "Keyboard", amount: 1800, status: "Cancelled" },
  { id: 105, customer: "Rohan Mehta", product: "Monitor", amount: 12000, status: "Pending" }
];

function App() {
  return (
    <div className="dashboard-layout">
      <Sidebar />
      <main className="dashboard-main" id="overview">
        <header className="topbar">
          <div>
            <h1>Dashboard Overview</h1>
            <p>Welcome back! Here is your business summary.</p>
          </div>
          <div className="profile">Admin</div>
        </header>
        <section className="stats-grid" aria-label="Business statistics">
          {stats.map((stat) => (
            <StatCard
              key={stat.id}
              title={stat.title}
              value={stat.value}
              change={stat.change}
            />
          ))}
        </section>
        <SalesChart data={salesData} />
        <TransactionsTable transactions={transactions} />
        <footer className="dashboard-footer">
          Dashboard Demo - Sample Data
        </footer>
      </main>
    </div>
  );
}
export default App;

11. Add Dashboard Styling in App.css

.dashboard-layout {
  display: flex;
  min-height: 100vh;
  background: #f4f7fb;
  color: #1f2937;
  font-family: Arial, sans-serif;
}
.sidebar {
  width: 240px;
  flex-shrink: 0;
  padding: 24px 16px;
  background: #172554;
  color: white;
}
.brand {
  margin: 0 0 32px;
  font-size: 23px;
}
.sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-menu li {
  margin-bottom: 8px;
}
.sidebar-menu a {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  color: #dbeafe;
  text-decoration: none;
}
.sidebar-menu a:hover,
.sidebar-menu a.active {
  background: #2563eb;
  color: white;
}
.dashboard-main {
  min-width: 0;
  flex: 1;
  padding: 28px;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
}
.topbar h1 {
  margin: 0 0 8px;
  font-size: 28px;
}
.topbar p {
  margin: 0;
  color: #64748b;
}
.profile {
  padding: 12px 16px;
  border-radius: 10px;
  background: white;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}
.stat-card,
.panel {
  border: 1px solid #e5eaf1;
  border-radius: 14px;
  background: white;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
}
.stat-card {
  padding: 20px;
}
.stat-title {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 14px;
}
.stat-value {
  margin: 0 0 12px;
  font-size: 25px;
}
.stat-change {
  margin: 0;
  color: #15803d;
  font-size: 13px;
}
.panel {
  padding: 22px;
  margin-bottom: 22px;
}
.panel h2 {
  margin-top: 0;
  font-size: 19px;
}
.chart-container {
  width: 100%;
  height: 300px;
}
.table-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.table-heading input {
  width: 250px;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #d5dce6;
  border-radius: 8px;
}
.table-wrapper {
  width: 100%;
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
th,
td {
  padding: 14px 12px;
  border-bottom: 1px solid #edf0f4;
  white-space: nowrap;
}
th {
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
}
.status {
  display: inline-block;
  padding: 6px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
}
.status-completed {
  background: #dcfce7;
  color: #166534;
}
.status-pending {
  background: #fef3c7;
  color: #92400e;
}
.status-cancelled {
  background: #fee2e2;
  color: #991b1b;
}
.dashboard-footer {
  padding: 12px 0;
  color: #64748b;
  text-align: center;
  font-size: 13px;
}
@media (max-width: 1100px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sidebar {
    width: 200px;
  }
}
@media (max-width: 760px) {
  .dashboard-layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    padding: 16px;
  }
  .brand {
    margin-bottom: 16px;
  }
  .sidebar-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .sidebar-menu li {
    margin: 0;
  }
  .dashboard-main {
    padding: 18px;
  }
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .table-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .table-heading input {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .topbar h1 {
    font-size: 24px;
  }
  .panel {
    padding: 14px;
  }
  .chart-container {
    height: 250px;
  }
}

12. Add Global Styles in index.css

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 2px;
}

13. Important React Concepts Used

13.1 Components

Components divide the dashboard into reusable sections such as Sidebar, StatCard, SalesChart, and TransactionsTable.

13.2 Props

Props pass data from a parent component to a child component.

<StatCard
  title={stat.title}
  value={stat.value}
  change={stat.change}
/>

13.3 useState

The useState Hook stores values that change through user interaction, such as search text, selected filters, and active tabs.

const [search, setSearch] = useState("");

13.4 map()

The map() method converts arrays of statistics or transactions into React elements.

{stats.map((stat) => (
  <StatCard key={stat.id} title={stat.title} value={stat.value} change={stat.change} />
))}

13.5 filter()

The filter() method selects records matching a search term or another condition.

const pendingOrders = transactions.filter(
  (transaction) => transaction.status === "Pending"
);

13.6 Conditional Rendering

Conditional rendering displays different UI elements depending on a condition or application state.

{transactions.length > 0 ? (
  <p>Transactions are available.</p>
) : (
  <p>No transactions found.</p>
)}

14. How Dashboard Charts Work

Charts transform numerical data into visual representations. A line chart shows trends over time, a bar chart compares categories, and a pie chart displays proportions.

In this project, Recharts receives the sales array through props and renders a line chart. Use meaningful labels, units, and legends so the data is easy to understand.

15. API Integration for a Real Dashboard

A production dashboard usually retrieves statistics and transaction records from a backend service rather than using hardcoded arrays. The following example demonstrates loading, error handling, and request cancellation.

import { useEffect, useState } from "react";

function DashboardData() {
  const [summary, setSummary] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    const controller = new AbortController();

    async function loadSummary() {
      try {
        setLoading(true);
        setError("");

        const response = await fetch("/api/dashboard/summary", {
          signal: controller.signal
        });

        if (!response.ok) {
          throw new Error("Unable to load dashboard data.");
        }

        const data = await response.json();
        setSummary(data);
      } catch (err) {
        if (err.name !== "AbortError") {
          setError(err.message || "Something went wrong.");
        }
      } finally {
        if (!controller.signal.aborted) {
          setLoading(false);
        }
      }
    }

    loadSummary();
    return () => controller.abort();
  }, []);

  if (loading) return <p>Loading dashboard...</p>;
  if (error) return <p role="alert">{error}</p>;
  if (!summary) return <p>No dashboard data available.</p>;

  return (
    <section>
      <h2>Dashboard Summary</h2>
      <p>Total Orders: {summary.totalOrders}</p>
      <p>Total Customers: {summary.totalCustomers}</p>
    </section>
  );
}

export default DashboardData;

Important: /api/dashboard/summary is a placeholder endpoint. A backend must implement it and enforce authentication and authorization before returning business data.

16. Common Dashboard Errors and Solutions

17. Dashboard Security and Best Practices

• Use reusable components for cards, charts, tables, and navigation.
• Keep API requests and data transformation logic organized.
• Use stable keys when rendering lists.
• Display loading, empty, and error states.
• Use accessible labels and keyboard navigation.
• Format currency, dates, and numbers consistently.
• Protect private API credentials on the server.
• Enforce authentication and authorization on the backend.
• Use pagination or server-side filtering for large datasets.
• Test the dashboard at different screen sizes.
• Use clear chart labels and suitable contrast.
• Profile performance before adding memoization optimizations.

18. Testing Checklist

• Verify that sidebar navigation displays correctly.
• Check all summary card values.
• Confirm that the sales chart displays the supplied data.
• Search for a customer in the transaction table.
• Search for a product that does not exist.
• Test API loading and error states.
• Check transaction status labels.
• Test keyboard navigation and focus indicators.
• Check desktop, tablet, and mobile layouts.
• Verify that unauthorized users cannot access protected dashboard data.

19. Interview Questions and Answers

Q1. What is a React Dashboard?

A React Dashboard is an interface built with React that summarizes important information using cards, charts, tables, and interactive controls.

Q2. Why are components useful in a dashboard?

Components separate the interface into reusable and maintainable sections.

Q3. What are props?

Props pass data and functions from parent components to child components.

Q4. What is useState?

useState is a React Hook used to store and update component state.

Q5. Why use map()?

map() renders repeated elements from arrays, such as summary cards and table rows.

Q6. Why use a chart library?

A chart library provides reusable visualizations for trends, comparisons, and proportions.

Q7. What is the purpose of useEffect in API integration?

useEffect can synchronize a component with an external API when data needs to load or refresh according to its dependencies.

Q8. How do you handle API errors?

Check the HTTP response, catch request failures, and display a clear error message.

Q9. How do you make a dashboard responsive?

Use CSS Grid, Flexbox, media queries, flexible widths, and scrollable tables where appropriate.

Q10. How should dashboard data be protected?

Use backend authentication and authorization, validate requests, and return only the data the user is permitted to access.

Q11. What is conditional rendering?

Conditional rendering displays different UI elements based on a condition or application state.

Q12. How can dashboard performance be improved?

Use efficient data fetching, pagination, and component separation. Use profiling to identify expensive rendering before applying optimization techniques.

20. Practical Exercises

1. Add a date-range filter to the dashboard.
2. Add a bar chart for monthly orders.
3. Add a pie chart for order statuses.
4. Create a customer details page.
5. Add pagination to the transactions table.
6. Implement sorting by transaction amount.
7. Fetch summary statistics from a backend API.
8. Add a dark mode toggle.
9. Create a notification panel.
10. Add authentication and protected dashboard routes.

21. Quick Revision

• React Components: Build separate dashboard sections.
• Props: Pass data between components.
• useState: Store interactive state.
• useEffect: Synchronize with external systems when needed.
• map(): Render cards, navigation items, and table rows.
• filter(): Search and filter records.
• Recharts: Display data visualizations.
• Fetch API: Request data from a backend.
• Responsive CSS: Adapt the dashboard to different screen sizes.
• Security: Enforce permissions on the server.

22. Official Documentation and Learning Resources

• React Official Learning Guide
• React useState Documentation
• React useEffect Documentation
• Recharts Official Documentation
• MDN Fetch API Guide

23. React JS Course and Demo Links

Explore React JS training and course demonstration options through the following links:

• JustAcademy React JS Training Course
• Register for React JS Course Demo

Conclusion

Building a React Dashboard is a practical way to learn reusable components, props, state management, charts, tables, API integration, and responsive design. This project provides a foundation for developing more advanced admin panels and business analytics applications using real backend data, authentication, and role-based permissions.